Umi + React + Ant Design Pro 项目实践（六）

#Umi + React + Ant Design Pro 项目实践（六）| 来源: 网络整理| 查看: 265

打开 .umirc.ts 文件：

import { defineConfig } from "umi"; export default defineConfig({ plugins: ['@umijs/plugins/dist/react-query'], reactQuery: {}, routes: [ { path: "/", component: "index" }, { path: "/docs", component: "docs" }, { path: "/products", component: "products" }, ], npmClient: 'pnpm', });

修改 .umirc.ts 文件：

import { defineConfig } from "umi"; export default defineConfig({ routes: [ { path: "/", component: "index", name:'home'}, { path: "/docs", component: "docs", name:'docs' }, { path: "/products", component: "products", name:'products' }, ], plugins: ['@umijs/plugins/dist/react-query'], reactQuery: {}, npmClient: 'pnpm', });

打开 src/layouts/index.tsx 文件：

import { Link, Outlet } from 'umi'; import styles from './index.less'; export default function Layout() { return ( ProLayout } from '@ant-design/pro-layout'; import { Link, Outlet, useAppData, useLocation } from 'umi'; export default function Layout() { const { clientRoutes } = useAppData(); const location = useLocation(); return ( location} title={'Umi x Ant Design'} menuItemRender={(menuItemProps, defaultDom) => { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom; } if (menuItemProps.path && location.pathname !== menuItemProps.path) { return ( menuItemProps.target}> {defaultDom} ); } return defaultDom; }} > ); }

这里先用 umi 的 useAppData 拿到全局客户端路由 clientRoutes，这是一份嵌套结构的路由表，我们把 clientRoutes[0] 传给 ProLayout；再通过 useLocation() 拿到 location 信息，也传给 ProLayout 来决定哪个菜单应该高亮；同时我们希望点击菜单时做路由跳转，需要需要定制 ProLayout 的 menuItemRender 方法。

页面效果：请添加图片描述

接下来，可以通过 npm run build 进行应用构建。

构建完成：在这里插入图片描述构建会打包所有的资源，包含 JavaScript, CSS, Web Fonts, Html, 图片等。

构建完成之后，生成的文件在 /dist/ 目录下。如下图：在这里插入图片描述

【本文地址】

公司简介

联系我们